<!--   @author  Created By  YS  on 2023/10/22 -->
<!--   @describe 用户界面-->

<template>
  <div class="body">
    <div class="card">
      <image class="head-img" src="../../static/common/logo.png" alt=""></image>
      <div class="content">
        <div class="content-name">
          <text>River</text>
          <image src="../../static/common/authentication.png" alt=""></image>
        </div>
        <div class="content-info">
          <image src="../../static/common/female.png" alt=""></image>
          <text>24/155cm/50kg • 北京</text>
        </div>
      </div>
    </div>

    <div class="word-text">
      本人河南禹州88年身高170CM 体重53KG长相一般不丑不邋遢，本人河南禹州88年身高展开
    </div>


    <div class="mt30">
      <u-tabs lineWidth="33.3"
              :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }"
              lineColor="#fff"
              :itemStyle="itemStyles" :list="tabs" @click="click"></u-tabs>
    </div>
    <div v-if="active == '相册'">
      <u-empty mode="message" :icon="icon"></u-empty>
    </div>
	<div v-if="active == '动态'">
	  <Card />
	</div>
    <div v-if="active == '资料'">
      <userInfo></userInfo>
<!--      <u-button  text="登录" :customStyle="customStyles"></u-button>-->
      <cBtn text="关注" :customStyle="{'marginTop':'100rpx'}"></cBtn>
    </div>
  </div>
</template>

<script>
import userInfo from "./components/userInfo";
import cBtn from "../../components/cBtn";
import Enum from "../../utils/enums"
import Card from "../home/components/Card.vue"
export default {
  data() {
    return {
      tabs: [{
        name: '相册',
      }, {
        name: '动态',
      }, {
        name: '资料'
      }],
      active:'相册',
      customStyles:Enum.customStyles,
      itemStyles:{
        width: '33.3%',
        boxSizing: 'border-box',
        height: '100rpx'
      },
      icon:require('../../assets/icon/user-filling.png')
    }
  },
  components: {
    userInfo,
    cBtn,
	Card
  },
  methods: {
    click(item) {
      console.log(item)
      this.active = item.name
    }

  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.nav-bar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 44px;
  background-color: #fff;
  img{
    width: 24rpx;
    height: 24rpx;
  }
}
.text-btn{
  width: 128rpx;
  height: 55rpx;
  border-radius: 27.5rpx;
  opacity: 1;
  border: 2rpx solid #7355ff;
  width: 90rpx;
  height: 42rpx;
  color: #7355ff;
  text-align: center;
  font-size: 30rpx;
  font-weight: 0;
  line-height: 42rpx;
  margin-right: 30rpx;
}


.word-text{
  width: 686rpx;
  height: 80rpx;
  opacity: 1;
  color: #919191;
  text-align: left;
  font-size: 28rpx;
  font-weight: 0;
  line-height: 40rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

.content-vip-image {
	width: 95rpx;
	height: 33rpx;
}

.content-info-sex {
	width: 35rpx;
	height: 24rpx;
}
</style>

